<!DOCTYPE html>
<html lang="en">
<style>

.chart {

}

.chart rect {
    fill: steelblue;
}

.chart text {
    fill: white;
    font: 10px sans-serif;
    text-anchor: end;
}

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

    
</style>
<svg class="chart"></svg>


<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

    var margin = {top: 20, right: 30, bottom: 30, left: 40};

    var width=960, height=500;

    var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
    var y = d3.scale.linear().range([0, height]);
    
    var chart = d3.select(".chart").attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var convertType = function(d) {
        d.value = parseInt(d.value);
        return d;
    }


    d3.tsv("data.tsv", convertType, function(error, data) {
        var max = d3.max(data, function(d) {
            return d.value;
        });

        
        x.domain(data.map(function(d) {return d.name;}));
        y.domain([0, d3.max(data, function(d) {return d.value;})]);

        var xAxis = d3.svg.axis().scale(x).orient("bottom");
        chart.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0, " + height + ")")
            .call(xAxis);

        var barWidth = x.rangeBand();

        var g = chart.selectAll(".bar").data(data).enter()
            .append("g").attr("class", ".bar").attr("transform", function (d, i) {
                return "translate(" + x(d.name) + ", 0)";
            });
        g.append("rect")
            .attr("width", barWidth)
            .attr("height", function(d) {return y(d.value);})
            .attr("y", function(d) {return height - y(d.value);});

        g.append("text")
            .attr("x", barWidth / 2)
            .attr("y", function(d) {return height - y(d.value) + 3})
            .attr("dy", ".75em")
            .text(function(d) {return d.value;});
    });
    
    

    
    
</script>